<template>
	<div>
		<van-search v-model="value" placeholder="COACH新品" disabled="true" right-icon="scan" class="index-search" @click="search">
		</van-search>
		<van-tabs v-model="active" 
		animated 
		line-width=15
		:sticky=true 
		:offset-top=55
		:swipe-threshold=6
		>
		
			<van-tab v-for="val in list" :title=" val">
				<van-swipe :autoplay="3000" class="index-banner">
					<van-swipe-item v-for="(image, index) in images" :key="index">
						<van-image :src="image" fit="cover" />
					</van-swipe-item>
				</van-swipe>
				<van-grid square class="index-list">
					<van-grid-item 
					:border=false 
					v-for="value in 8" 
					:key="value" 
					icon="photo-o" 
					text="变量" />
					<van-image src="" />
				</van-grid>
				<h2>品牌折扣</h2>
				<van-card
				v-for="(v,i) in shoplist"
				num="1"
				:price="v.pprice" 
				:desc="v.pdesc" 
				:title="v.pname" 
				:thumb="v.pimg"
				v-tap='{methods:tap,id:v.pid}'
				class="cart-list">
					<div slot="tags" class="cart-tag">
						<van-tag>拼色</van-tag>
					</div>
				</van-card>
				<p class="test">test</p>
			</van-tab>
		</van-tabs>
	</div>
</template>

<script>
	import {mapState} from "vuex"
	export default {
		name: "Home",
		data() {
			return {
				value: "",
				active: 0,
				list: ["推荐", "女装", "男装", "鞋履", "包配", "美妆", "生活", "婴童", "即将上新"],
				images: [
					'https://img.yzcdn.cn/vant/apple-1.jpg',
					'https://img.yzcdn.cn/vant/apple-2.jpg',
					'https://img.yzcdn.cn/vant/apple-3.jpg',
					'https://img.yzcdn.cn/vant/apple-4.jpg'
				]
			}
		},
		mounted(){
			this.$store.dispatch('getShop')
		},
		computed:{
			...mapState(["shoplist"])
		},
		methods: {
			search() {
				this.$router.push("/search")
			},
			tap(obj){
				this.$router.push("/goodsDetail/"+obj.id)
				// console.log(obj.id)
			}
		}
	}
</script>

<style scoped="">
	.index-search {
		position: fixed;
		top: 0;
		width: 100%;
		/* margin-bottom: 20px; */
		z-index: 99;
	}

	.index-banner {
		background: cyan;
		height: 200px;
		width: 100%;
	}

	.index-list {
		width: 80%;
		margin-left: 10%;
		margin-top: -10px;
	}
	h2{
		text-align: left;
	}

	.test {
		height: 1000px;
	}
</style>
